<template>
  <!-- 中介订单详情 -->
  <el-dialog @close="close" class="pick-dialog" title="中介订单详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1200px">
    <div class="form-box">
      <div class="order-info flex">
        <span>订单编号： {{ruleForm.orderNo}}</span>
        <span>创建时间： {{ruleForm.createTime}}</span>
        <span>完成时间： {{ruleForm.finishTime || '--'}}</span>
      </div>
      
      <el-descriptions title="订单信息" :column="3" border :labelStyle="{width:'120px'}">
        <el-descriptions-item label="订单状态">
          <el-tag :type="orderStatusType(ruleForm.orderStatus)">{{ orderStatusText(ruleForm.orderStatus) }}</el-tag>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="支付状态">
          <el-tag :type="payStatusType(ruleForm.paymentStatus)">{{ payStatusText(ruleForm.paymentStatus) }}</el-tag>
        </el-descriptions-item> -->
        <!-- <el-descriptions-item label="换绑状态">
          <el-tag :type="changeBindType(ruleForm.bindingStatus)">{{ changeBindText(ruleForm.bindingStatus) }}</el-tag>
        </el-descriptions-item> -->
        
        <!-- <el-descriptions-item label="放款状态">
          <el-tag :type="loanStatusType(ruleForm.loanStatus)">{{ loanStatusText(ruleForm.loanStatus) }}</el-tag>
        </el-descriptions-item> -->
        <el-descriptions-item label="合同状态">
          <el-tag :type="contractStatusType(ruleForm.contractStatus)">{{ contractStatusText(ruleForm.contractStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="售后状态">
          <el-tag v-if="ruleForm.afterStatus" :type="afterStatusType(ruleForm.afterStatus)">{{ afterStatusText(ruleForm.afterStatus) }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="买家">{{ruleForm.buyerNickname}}</el-descriptions-item>
        <el-descriptions-item label="卖家">{{ruleForm.sellerNickname}}</el-descriptions-item>
        <el-descriptions-item label="客服">{{ruleForm.customerNickname}}</el-descriptions-item>
        
        <el-descriptions-item label="游戏名称">{{ruleForm.gameName}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{ruleForm.account}}</el-descriptions-item>
        <el-descriptions-item label="商品金额">
          <span style="color:red">¥{{formatMoney(ruleForm.productAmount)}}</span>
        </el-descriptions-item>
        
        <el-descriptions-item label="包赔费">
          <span style="color:red">¥{{formatMoney(ruleForm.compensationFee)}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="手续费">
          <span style="color:red">¥{{formatMoney(ruleForm.serviceFee)}}</span>
        </el-descriptions-item>
      

        <el-descriptions-item label="其他信息" :span="6">
          <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{ruleForm.otherInfo || '---'}}</div>
        </el-descriptions-item>
         <el-descriptions-item label="换绑截图">
          <img-box width="50px" :img="ruleForm.bindingScreenshot" :height="50"></img-box>
        </el-descriptions-item>
         <el-descriptions-item  label="支付截图" >
          <img-box width="50px" :img="ruleForm.paymentScreenshot" :height="50"></img-box>
        </el-descriptions-item>
        <el-descriptions-item  label="放款截图">
          <img-box width="50px" :img="ruleForm.loanScreenshot" :height="50"></img-box>
        </el-descriptions-item>

        <el-descriptions-item label="取消原因" :span="3" >
          <div style="color: #f56c6c;">{{ruleForm.cancelReason }}</div>
        </el-descriptions-item>
      </el-descriptions>
        <div style="height:20px"></div>

  <el-descriptions v-if="guaranteeInfo && guaranteeInfo.name" title="包赔资料" :column="3" border
                :labelStyle="{ minWidth: '80px', width: '80px', textAlign: 'right' }"
                :contentStyle="{ minWidth: '100px', textAlign: 'left' }">
                <el-descriptions-item label="卖家姓名">{{ guaranteeInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ guaranteeInfo.idCard }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ guaranteeInfo.phoneNumber }}</el-descriptions-item>
                <el-descriptions-item label="地址" :span="3">{{ guaranteeInfo.adress }}</el-descriptions-item>
                <!-- <el-descriptions-item label="卖家" v-if="orderInfo.backClueOrder">{{orderInfo.backClueOrder.sellerName}}</el-descriptions-item> -->
                <el-descriptions-item label="家庭人员" :span="3">
                    <span style="white-space: pre;">{{ guaranteeInfo.familyRemark }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="其他信息" :span="3">
                    <span style="white-space: pre;">{{ guaranteeInfo.otherRemark }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="图片" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in baopeiImgs" :key="item">
                            <img :src="item" @click="review(baopeiImgs, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
      <div class="sfk">
        <span>总金额：</span>
        <span class="price">
          <span>¥</span><span class="txt">{{ formatMoney(ruleForm.totalAmount) }}</span>
        </span>
      </div>

      <div class="center">
        <el-button @click="close('ruleForm')">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ImgBox from '../../../components/imgBox.vue';
export default {
  name: "InterOrderDetail",
  components: {ImgBox},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {},
      guaranteeInfo: null
    };
  },
  methods: {
    open(row) {
      this.ruleForm = row || {};
      this.loading = false;
      
      // 解析包赔资料
      if (this.ruleForm.compensationMaterials) {
        try {
          this.guaranteeInfo = JSON.parse(this.ruleForm.compensationMaterials);
        } catch (e) {
          this.guaranteeInfo = null;
        }
      } else {
        this.guaranteeInfo = null;
      }
       if (row.compensationMaterials) {
                this.guaranteeInfo = JSON.parse(row.compensationMaterials)
                let arr = [];
                if (this.guaranteeInfo.emblemIdcardImg) {
                    arr.push(this.guaranteeInfo.emblemIdcardImg);
                }
                if (this.guaranteeInfo.faceIdcardImg) {
                    arr.push(this.guaranteeInfo.faceIdcardImg);
                }
                if(this.guaranteeInfo.handIdcardImg) {
                    arr.push(this.guaranteeInfo.handIdcardImg);
                }
                if (this.guaranteeInfo.img) {
                    const arr2 = JSON.parse(this.guaranteeInfo.img);
                    if (arr2 && arr2.length) {
                        arr2.forEach((r) => {
                            if (r.url) {
                                arr.push(r.url);
                            }
                        });
                      
                    }
                }
                this.baopeiImgs = arr;
            }
      this.dialogVisible = true;
    },
     review(ind) {
      this.$viewerApi({
        images: this.baopeiImgs,
        options: {
          initialViewIndex: ind
        }
      });
    },
    // 状态文本和类型映射方法
    orderStatusText(val) {
      const map = { 1: '交易中', 2: '交易取消', 3: '交易完成' };
      return map[val] || '-';
    },
    orderStatusType(val) {
      switch(val) {
        case 1: return 'warning'; // 交易中
        case 2: return 'danger';  // 交易取消
        case 3: return 'success'; // 交易完成
        default: return 'info';
      }
    },
    
    changeBindText(val) {
      const map = { 1: '未换绑', 2: '已换绑' };
      return map[val] || '-';
    },
    changeBindType(val) {
      switch(val) {
       
        case 2: return 'success'; // 换绑complete
       
        case 1: return 'info';   // 未换绑
        default: return 'info';
      }
    },
    
    payStatusText(val) {
      const map = { 1: '未支付', 2: '已支付', 3: '支付失败' };
      return map[val] || '-';
    },
    payStatusType(val) {
      switch(val) {
        case 2: return 'success'; // 已支付
        case 1: return 'info';    // 未支付
        case 3: return 'danger';  // 支付失败
        default: return 'info';
      }
    },
    
    loanStatusText(val) {
      const map = { 1: '未放款', 2: '已放款', 3: '放款失败' };
      return map[val] || '-';
    },
    loanStatusType(val) {
      switch(val) {
        case 2: return 'success'; // 已放款
        case 1: return 'info';    // 未放款
        case 3: return 'danger'; // 放款失败
        default: return 'info';
      }
    },
    
    contractStatusText(val) {
      const map = { 1: '未生成', 2: '已生成', 3: '已签署', 4: '已作废' };
      return map[val] || '-';
    },
    contractStatusType(val) {
      switch(val) {
        case 3: return 'success'; // 已签署
        case 2: return 'warning'; // 已生成
        case 4: return 'danger';  // 已作废
        case 1: return 'info';    // 未生成
        default: return 'info';
      }
    },
    
    afterStatusText(val) {
      const map = { 1: '无售后', 2: '售后中', 3: '售后完成', 4: '售后关闭' };
      return map[val] || '-';
    },
    afterStatusType(val) {
      switch(val) {
        case 3: return 'success'; // 售后完成
        case 2: return 'warning'; // 售后中
        case 4: return 'danger';  // 售后关闭
        case 1: return 'info';    // 无售后
        default: return 'info';
      }
    },
    
    groupStatusText(val) {
      const map = { 1: '未拉群', 2: '已拉群', 3: '已解散' };
      return map[val] || '-';
    },
    groupStatusType(val) {
      switch(val) {
        case 2: return 'success'; // 已拉群
        case 1: return 'info';    // 未拉群
        case 3: return 'danger';  // 已解散
        default: return 'info';
      }
    },
    
    formatMoney(n) {
      if (n === 0) return '0.00';
      if (!n) return '---';
      return Number(n).toFixed(2);
    },
    
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  padding: 15px;
  // width: 1000px;
  .img-box {
    flex-wrap: wrap;
    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}

.price-box {
  text-align: right;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-right: 20px;
}
.payway-box {
  justify-content: flex-end;
}
.payway-item {
  width: 150px;
  border: 1px solid #999;
  border-radius: 2px;
  padding: 5px 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;

  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .icon {
    display: none;
    position: absolute;
    top: 10px;
    right: 3px;
  }
  &.active {
    border: 2px solid #f7423f;
    .icon {
      color: #f7423f;
      display: block;
    }
  }
}

.sfk {
  text-align: right;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;

  .txt {
    font-size: 26px;
    color: #ff0000;
    margin-left: 5px;
  }
}

.demo-ruleForm {
  padding-right: 20px;
}

.center {
  text-align: right;
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.pick-dialog >>> .el-input--medium input {
  text-align: left;
}
</style>
